import './index.css'
import { Flex, Avatar,Input, Select   } from 'antd';
import React, { useState } from 'react';
import {PlusOutlined, SearchOutlined } from '@ant-design/icons';
let Project = () => {
        const [currentId3, setCurrentId3] = useState(1)
  const options3 = [

    { label: "全部", id: 1 },
    { label: "设计", id: 2 },
    { label: "文件夹", id: 3},
    ]
      const changeId3 = (id) => {
    setCurrentId3(id)
  }
    return (
        <div>
                <Input prefix={<SearchOutlined />} style={{ width: '90%', height: '40px', margin: '20px 20px 10px 20px' }} placeholder="搜索图片" />
                
    <Select
      defaultValue="lucy"
      style={{
        width: '90%',
        height: '40px', margin: '5px 20px 20px 20px'
      }}
      options={[
        {
          value: '所有项目',
          label: '所有项目',
        },
        {
          value: '我的项目',
          label: '我的项目',
        },
        {
          value: '与我分享',
          label: '与我分享',
        },
      ]}
    />

                 {options3.map((item) => {
                          return (
                              <div key={item.id} onClick={() => changeId3(item.id)} className={item.id == currentId3 ? "active" : ""}>
                                      <div className='tpspyp' style={{float:'left'}}>{item.label}</div>
                            </div>
          )
                 })}
                <div style={{width:'100%',height:'460px',overflowX:'hidden',overflowY:'scroll'}}>
                  <div style={{ display: currentId3 == 1 ? "block" : "none" }}>
                    <span style={{ color: '#fff', fontWeight: 'bold', margin: '20px' }}>设计</span>
                     <div style={{ width: '100%', height: '300px',marginTop:'20px',marginLeft:'20px' }}>
                  <b style={{color:'#fff'}}>文件夹</b>
                    <div style={{ width: '100%', height: '88px' }}><Avatar style={{ border: '#5770EC', color: '#fff', margin: '12px', float: 'left' }} shape="square" size={64} icon={<PlusOutlined />} />
                       <b style={{ color: '#fff',float:'left',lineHeight:'88px' }}>创建文件夹</b>
                    </div>
                     <div style={{ width: '100%', height: '88px' }}><Avatar style={{ border: '#5770EC', color: '#fff', margin: '12px', float: 'left' }} shape="square" size={64} icon={<PlusOutlined />} />
                       <b style={{ color: '#fff',float:'left',lineHeight:'88px' }}>已添加星标</b>
                    </div>
                </div>
                  </div>
                  <div style={{ display: currentId3 == 2 ? "block" : "none" }}>
                  <span style={{color:'#fff'}}>...或直接将桌面上的文件或视频拖至此处上传</span>
                  </div>
                  <div style={{ display: currentId3 == 3 ? "block" : "none" }}>
                                      <div style={{ width: '100%', height: '88px' }}><Avatar style={{ border: '#5770EC', color: '#fff', margin: '12px', float: 'left' }} shape="square" size={64} icon={<PlusOutlined />} />
                       <b style={{ color: '#fff',float:'left',lineHeight:'88px' }}>创建文件夹</b>
                    </div>
                     <div style={{ width: '100%', height: '88px' }}><Avatar style={{ border: '#5770EC', color: '#fff', margin: '12px', float: 'left' }} shape="square" size={64} icon={<PlusOutlined />} />
                       <b style={{ color: '#fff',float:'left',lineHeight:'88px' }}>已添加星标</b>
                    </div>
                  </div>
                </div>
        </div>
)
}

export default Project